<template>
  <header class="header header-page-bg">
    <div class="container">
      <div class="header-page-content">
        <div class="row align-items-center">
          <div class="col-md-7">
            <div class="header-content">
              <h1>Contact Us</h1>
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">
                    Contact Us
                  </li>
                </ol>
              </nav>
            </div>
          </div>
          <div class="col-md-5 d-none d-md-block">
            <div
              class="header-content-image header-content-abs-image header-content-abs-image-lg"
            >
              <img
                :src="require('assets/images/inner-page-header/page-5.png')"
                alt="page"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!--  -->
  <div class="contact-info-section pt-100 pb-70 box-width-870">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-lg-4 pb-30">
          <div class="contact-card">
            <h3>Address</h3>
            <p>3227 Millbrook Road, UK</p>
            <p>4532 Millbrook Road, UK</p>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 pb-30">
          <div class="contact-card">
            <h3>Call Number</h3>
            <p><a href="tel:+1-456-7890-3524">+1 456 7890 3524</a></p>
            <p><a href="tel:+1-322-7498-1256">+1 322 7498 1256</a></p>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 pb-30 offset-lg-0 offset-sm-3">
          <div class="contact-card">
            <h3>Contact Info</h3>
            <p>
              <a
                href="/cdn-cgi/l/email-protection#e28a878e8e8dbd8b8c848da28d97968d85908d9792cc818d8f"
                ><span
                  class="__cf_email__"
                  data-cfemail="dcb4b9b0b0b383b5b2bab39cb3a9a8b3bbaeb3a9acf2bfb3b1"
                  >[email&nbsp;protected]</span
                ></a
              >
            </p>
            <p>
              <a
                href="/cdn-cgi/l/email-protection#4b232e2727241422252d240b243e3f242a2c2e25283265282426"
                ><span
                  class="__cf_email__"
                  data-cfemail="026a676e6e6d5d6b6c646d426d77766d6365676c617b2c616d6f"
                  >[email&nbsp;protected]</span
                ></a
              >
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--  -->
  <section class="contact-form-section pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 pb-30">
          <div class="contact-form-item contact-form-image"></div>
        </div>
        <div class="col-lg-6 pb-30">
          <div class="contact-form-item contact-form-bg">
            <div class="sub-section-title">
              <h2 class="sub-section-title-heading">Message</h2>
            </div>
            <form class="contact-form" id="contactForm" novalidate="true">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group mb-20">
                    <label>Name</label>
                    <input
                      type="text"
                      name="name"
                      id="name"
                      class="form-control form-control-background-white"
                      placeholder="Your name*"
                      required=""
                      data-error="Please enter your name"
                    />
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group mb-20">
                    <label>Phone number</label>
                    <input
                      type="text"
                      name="phone"
                      id="phone"
                      class="form-control form-control-background-white"
                      placeholder="+125-40-5655"
                    />
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-group mb-20">
                    <label>Email address</label>
                    <input
                      type="text"
                      name="email"
                      id="email"
                      class="form-control form-control-background-white"
                      placeholder="Email address*"
                      required=""
                      data-error="Please enter your email"
                    />
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-group mb-20">
                    <label>Email subject</label>
                    <input
                      type="text"
                      name="subject"
                      id="subject"
                      class="form-control form-control-background-white"
                      placeholder="Email subject*"
                      required=""
                      data-error="Please enter your subject"
                    />
                    <div class="help-block with-errors"></div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-group mb-20">
                    <label>Message</label>
                    <textarea
                      name="message"
                      class="form-control form-control-background-white"
                      id="message"
                      rows="6"
                      placeholder="Message"
                    ></textarea>
                  </div>
                </div>
                <div class="col-12">
                  <div class="input-checkbox input-checkbox-secondcolor mb-20">
                    <input type="checkbox" id="contact1" />
                    <label for="contact1"
                      >I have read all
                      <a href="terms-condition.html">terms &amp; condition</a>
                      &amp;
                      <a href="privacy-policy.html">privacy policy</a>.</label
                    >
                  </div>
                </div>
                <div class="col-12">
                  <button
                    class="btn main-btn main-btn-secondary full-width disabled"
                    type="submit"
                    style="pointer-events: all; cursor: pointer"
                  >
                    Send Message
                  </button>
                  <div id="msgSubmit"></div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const {} = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const methods = {};
</script>
<style lang="scss" scoped></style>
